<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/easyui/plugins/datagrid-detailview.js"></script>

<script type="text/javascript">
 $(function(){
	 

	 $('#tt1').datagrid({
		 pageList:[10]
	 	});

	 $('#tt2').datagrid({
		 pageList:[10]
	 	});
	 
	 $('#tt1').datagrid({
		 view: detailview,
		 detailFormatter:function(index,row){
		 return '<div style="padding:2px"><table class="ddv"></table></div>';
		 },
		 onExpandRow: function(index,row){
		 var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
		 ddv.datagrid({
			 url:'${pageContext.request.contextPath}/custome/getPhoneJson.html?cus_id='+row.cus_id,
		 	fitColumns:true,
		 	singleSelect:true,
		 	loadMsg:'正在加载...',
		 	height:'auto',
		 	columns:[[
				 {field:'phone',title:'电话',width:1000}
			 ]],
			 onResize:function(){
				   $('#tt1').datagrid('fixDetailRowHeight',index);
				  },
			  onLoadSuccess:function(){
				  setTimeout(function(){
				  $('#tt1').datagrid('fixDetailRowHeight',index);
				  },0);
				  }
			 });
		   }
		 });

	 $('#tt2').datagrid({
		 view: detailview,
		 detailFormatter:function(index,row){
		 return '<div style="padding:2px"><table class="ddv"></table></div>';
		 },
		 onExpandRow: function(index,row){
		 var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
		 ddv.datagrid({
			 url:'${pageContext.request.contextPath}/custome/getPhoneJson.html?cus_id='+row.cus_id,
		 	fitColumns:true,
		 	singleSelect:true,
		 	loadMsg:'正在加载...',
		 	height:'auto',
		 	columns:[[
				 {field:'phone',title:'电话',width:1000}
			 ]],
			 onResize:function(){
				   $('#tt2').datagrid('fixDetailRowHeight',index);
				  },
			  onLoadSuccess:function(){
				  setTimeout(function(){
				  $('#tt2').datagrid('fixDetailRowHeight',index);
				  },0);
				  }
			 });
		   }
		  
		 });
	 
	 $('#tt1').datagrid('load',{  
		   cus_name: ''
	    });  
	
	 $("#searchPri").click(function(){
		   $('#tt1').datagrid('load',{  
			   cus_name: $('#cus_name').val()
		    });  
	});
	 
	 $('#tt2').datagrid('load',{  
		   cus_name: ''
	    });  
	
	 $("#searchAll").click(function(){
		   $('#tt2').datagrid('load',{  
			   cus_name: $('#cus_name2').val()
		    });  
	});
 }) 
  
  var url = "${pageContext.request.contextPath}/custome/addCustome.html";
 function newUser() {
 	$.getJSON("${pageContext.request.contextPath}/house/getAllHouseNumberJson.html",function(result){
 		$.each( result["rows"], function( key, val ) {
 				$("#housesId").append("<option value="+val.houseId+">"+val.number+"</option>");
 			});
 	});
	 $('#dlgcust').dialog('open').dialog('setTitle','新建客户');
	 $('#fmcust').form('clear');
 }

 function saveUser(){
	 $('#fmcust').form('submit',{
	 url:url,
	 onSubmit: function(){
		 return $(this).form('validate');
	 },
	 success: function(result){
		 var result = eval('('+result+')');
		 if (result.errorMsg){
			 $.messager.show({
			 title: 'Error',
			 msg: result.errorMsg
			 });
		 } else {
			 $('#dlgcust').dialog('close'); // close the dialog
			 $('#tt1').datagrid('reload'); // reload the user data
			 $.messager.show({
				 title: '成功',
				 msg: "数据添加成功"
				 });
		 }
	 	}
	 });
	}

 function newPhone(){
	 var row = $('#tt1').datagrid('getSelected');
	 if (row){
		 $('#dlgcust').dialog('open').dialog('setTitle','添加电话');
		 $('#fmcust input[id=cus_name]').attr('readonly','readonly');
		 $('#fmcust input[name=phones]').val('');
		 $('#fmcust #numberLable').remove();
		 $('#fmcust').form('load',row);
		 url = "${pageContext.request.contextPath}/custome/updateCustome.html?cus_id=" + row.cus_id;
	 } else {
		 $.messager.show({
			 title: '提示',
			 msg: "请选择一个客户"
			 });
	 }
	} 
 
 function bingEmployee(){
	 var row = $('#tt2').datagrid('getSelected');
	 if (row){
		 $('#hiddencus_id').val(row.cus_id);
		 $.getJSON("${pageContext.request.contextPath}/employee/getEmployeeAll.html",function(result){
		 		$.each( result["rows"], function( key, val ) {
		 				$("#selecte_sn").append("<option value="+val.e_sn+">"+val.e_name+"</option>");
		 			});
		 	});
		 $('#dlgchooseEmp').dialog('open').dialog('setTitle','绑定员工');
	 }else {
		 $.messager.show({
			 title: '提示',
			 msg: "请选择一个客户"
			 });
	 }
 }
 
 function saveBindEMP(){
	 $('#fmchooseEmp').form('submit',{
	 success: function(result){
		 var result = eval('('+result+')');
		 if (result.errorMsg){
			 $.messager.show({
			 title: 'Error',
			 msg: result.errorMsg
			 });
		 } else {
			 $('#dlgchooseEmp').dialog('close'); // close the dialog
			 $('#tt2').datagrid('reload'); // reload the user data
			 $.messager.show({
				 title: '成功',
				 msg: "数据添加成功"
				 });
		 }
	 	}
	 });
	}
 
</script>
 	<div class="easyui-tabs" style="width:auto;height:auto">
		<div title="我的客户" style="padding:10px">
		     <table id="tt1" class="easyui-datagrid" style="width:auto;height:600px"
					url="${pageContext.request.contextPath}/custome/viewCustomersJson/pri.html"
					singleSelect="true"
					pagination="true"
					pagePosition="both"
					fitColumns="true"
					toolbar="#toolbarcust">
			    <thead>
				    <tr>
				    <th data-options="field:'cus_name',width:100">姓名</th>
				    <th data-options="field:'cus_status',width:100">状态</th>
				    <th data-options="field:'cus_type',width:100">类型</th>
				   	<th data-options="field:'cus_level',width:100">级别</th>
				   	<th data-options="field:'createTime',width:300">创建时间</th>
				    </tr>
			    </thead>
		    </table>
	    </div>
	    <div title="所有客户" style="padding:10px">
	    	 <table id="tt2" class="easyui-datagrid" style="width:auto;height:600px"
					url="${pageContext.request.contextPath}/custome/viewCustomersJson/pub.html"
					singleSelect="true"
					pagination="true"
					pagePosition="both"
					fitColumns="true"  
					toolbar="#toolbarbind"
					>
			    <thead>
				    <tr>
				    <th data-options="field:'cus_name',width:100">姓名</th>
				    <th data-options="field:'cus_status',width:100">状态</th>
				    <th data-options="field:'cus_type',width:100">类型</th>
				   	<th data-options="field:'cus_level',width:100">级别</th>
				   	<th data-options="field:'createTime',width:300">创建时间</th>
				    </tr>
			    </thead>
		    </table>
	    </div>
    </div>
     <div id="toolbarcust">
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">新建客户</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newPhone()">添加电话</a>
		<div style="padding-left:10px;">	
			 <span>姓名</span>  
   			 <input id="cus_name" style="line-height:26px;border:1px solid #ccc">  
    		 <a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" id="searchPri" >Search</a>  
		</div>		
	</div>

    	
     <div id="toolbarbind">
		<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="bingEmployee()">绑定到员工</a>
		<div style="padding-left:10px;">	
		 <span>姓名</span>  
  			<input id="cus_name2" style="line-height:26px;border:1px solid #ccc">  
   			 <a href="#" class="easyui-linkbutton" iconCls="icon-search" plain="true" id="searchAll" >Search</a>  
		</div>	
	</div>

	 <div id="dlgcust" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
		closed="true" buttons="#dlg-buttons">
		 <div class="ftitle">客户基本信息</div>
		<form id="fmcust" method="post" novalidate >
			<div class="fitem">
				<label>姓名:</label>
				<input name="cus_name" id="cus_name" class="easyui-validatebox"  data-options="required:true,validType:'length[3,10]'">
			</div>
			<div class="fitem">
				<label>电话:</label>
				<input name="phones" class="easyui-validatebox" >
			</div>
			<div class="fitem" id="numberLable">
				<label>绑定房屋编号:</label>
				<select id="housesId" name="housesId"></select>
			</div>
		</form>
	</div>
	
 <div id="dlg-buttons">
	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">保存</a>
	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlgcust').dialog('close')">取消</a>	
</div>

<div id="dlgchooseEmp" class="easyui-dialog" style="width:400px;height:280px;padding:10px 20px"
		closed="true" buttons="#dlg-buttons">
		 <div class="ftitle">选择员工</div>
		<form id="fmchooseEmp" method="post" novalidate action="custome/bindEmployee.html">
			<input type="hidden" name="cus_id" id="hiddencus_id"/>
			<div class="fitem">
				<label>员工:</label>
				<select id="selecte_sn" name="e_sn"></select>
			</div>
		</form>
	</div>
 <div id="dlg-buttons">
	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveBindEMP()">保存</a>
	<a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlgchooseEmp').dialog('close')">取消</a>
</div>